<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<myheader :leftType="2"  :noLeft="false" showTitle="我有话说"></myheader>
		<!-- #endif -->
		 <view class="des" v-if="list.length == 0">暂无数据</view>
		 <view class="msg" v-for="(item, index) in list" :key="index">
			<view class="msg-item border-top" :class="{ 'border-bottom': !item.children || item.children.length==0 }">
				<view class="msg-item-content">
					<view class="msg-item-content-top">我  {{item.createTime}}</view>
					<view class="msg-item-content-mid">{{item.content}}</view>
				</view>
			</view>
			<view class="msg-item" :class="{ 'border-bottom': item.children && item.children.length - 1 == idx }" :key="idx" v-for="(ele, idx) in item.children">
				<view class="msg-item-content">
					<view class="msg-item-content-top">建议反馈的回复 {{ele.createTime}}</view>
					<view class="msg-item-content-mid">{{ele.content}}</view>
					<!-- <view v-if="ele.userId !==1" class="msg-item-content-bottom" @tap="reply(ele)">回复</view> -->
				</view>
			</view>
		 </view>
		 <view class="add" @tap="openPop">+  我有话要说</view>
		 <uni-popup ref="popup" type="center" background-color="white" @change="popupChange">
			<view class="input">
				<view class="input-msg">
					<textarea type="text" placeholder="请在这里输入想说的内容…" v-model="msg" />
				</view>
				<view class="input-btn" @tap="submit">提交</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import myheader from '../../components/header/index.vue';
	export default {
		components: {
			myheader
		},
		data() {
			return {
				msg: '',
				editMsg: {},
				list: [],
				params: {
					cursor: null,
					pageSize: 10
				}
			}
		},
		onLoad() {
			this.getMsg()
		},
		onReachBottom() {
			this.params.cursor++
			this.getMsg('add')
		},
		methods: {
			getMsg(flag) {
				this.$H.post("portal/feedback/list", this.params).then((res) => {
					uni.hideLoading();
					if (res.code == 0) {
						if (res.data.cursor) {
							this.params.cursor = res.data.cursor
						}
						if (flag) {
							let arr = res.data.data? res.data.data: []
							this.list = this.list.concat(arr)
						} else {
							this.list = res.data.data? res.data.data: []
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				});
			},
			submit() {
				if (!this.msg) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					})
					return
				}
				this.$H.post("portal/feedback/post", {
					content: this.msg,
					pid: this.editMsg.id? this.editMsg.id: null
				}).then((res) => {
					uni.hideLoading();
					if (res.code == 0) {
						this.$refs.popup.close()
						this.msg = ''
						uni.showToast({
							title: '提交成功',
							icon: "none"
						})
						this.params.cursor = null
						this.getMsg()
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				});
			},
			openPop() {
				this.$refs.popup.open()
			},
			popupChange() {
				this.msg = ''
			},
			reply(item) {
				this.editMsg = Object.assign({}, item)
				this.$refs.popup.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
.border-top {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.border-bottom {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.des {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	color: #8292A2;
	height: 64rpx;
}
.input {
	width: 670rpx;
	padding: 20rpx;
	display: flex;
	flex-direction: column; 
	background: #fff;
	border-radius: 20rpx;
	&-msg {
		width: 100%;
		height: 400rpx;
		font-size: 26rpx;
		color: #34495e;
		padding: 20rpx;
	}
	&-btn {
		width: 80%;
		margin-left: 10%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		background: #1ABC9C;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		border-radius: 20rpx;
	}
}
.add {
	position: fixed;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);
	width:362rpx;
	height: 136rpx;
	line-height: 136rpx;
	text-align: center;
	border-radius: 64rpx;
	background: #1ABC9C;
	box-shadow: 0px 10px 50px 0px #A3C6BF,inset 0px 6px 10px 0px rgba(255, 255, 255, 0.15);
	z-index: 1;
	color:#fff;
	font-size: 40rpx;
	font-weight: bold;
}
.msg {
	margin-top: 24rpx;
	border-radius: 8rpx;
	padding: 0 20rpx;
	width: calc(100% - 40rpx);
	&-item {
		padding: 20rpx;
		width: calc(100% - 40rpx);
		background: #fff;
		&-content {
			display: flex;
			flex-direction: column;
			&-top {
				font-size: 28rpx;
				color: #8292A2;
				height: 48rpx;
				line-height: 48rpx;
				border-bottom: 2px solid #EAECEF;
			}
			&-mid {
				line-height: 44rpx;
				font-size: 28rpx;
				font-weight: 400;
				word-break: break-all;
				margin-top: 20rpx;
				color: #34495e;
			}
			&-bottom {
				font-size: 32rpx;
				font-weight: 700;
				line-height: 48rpx;
				margin-top: 20rpx;
				color: #1ABC9C;
			}
		}
	}
}
</style>
